<template>
  <div class="register_container">
    <div class="register_box ">
      <div class="register_text">用户注册</div>
      <!--跳转登录-->
      <div class="login-link">
        <el-button type="text" @click="toLogin">
          <router-link to="/register">登录</router-link>
        </el-button>
      </div>
      <el-form class="register_box_input" :rules="rules" ref="form" :model="form">
        <!--用户名-->
        <el-form-item  prop="username">
          <el-input v-model="form.username" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item  prop="password">
          <el-input v-model="form.password" type="password" prefix-icon="el-icon-lock" show-password></el-input>
        </el-form-item>
        <!--再次输入密码-->
        <el-form-item  prop="checkPassword">
          <el-input v-model="form.checkPassword" type="password" prefix-icon="el-icon-lock" show-password></el-input>
        </el-form-item>
        <!--按钮-->
        <el-form-item class="btn">
          <el-button type="primary" round @click="onSubmit">注册</el-button>
          <el-button type="info" round @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'register',
  components: {},
  data() {
    return {
      form: {
        username: '',
        password: '',
        checkPassword: '',
      },
      rules: {
        username: [
          { required: true, message: '用户名', trigger: 'blur' },
          { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码', trigger: 'blur' },
          { min: 6, message: '长度不少于6个字符', trigger: 'blur' }
        ],
        checkPassword: [
          { required: true, message: '确认密码', trigger: 'blur' },
          { min: 6, message: '长度不少于6个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    toLogin(){
      this.$router.push('/login')
    },
    onSubmit() {
      this.$refs.form.validate(async v=>{
        if(!v) return;
        const {data:res}=await axios.post('/api/user/register', {
          username: this.form.username,
          userPassword: this.form.password,
          checkPassword:this.form.checkPassword,
        })
        if (res.code !== 0) {return this.$message.error(res.description||"注册失败")}
        this.$message.success("注册成功")
        this.toLogin()
      })
    },
    resetForm(){
      this.$refs.form.resetFields();
    },
  },

}
</script>


<style scoped>
.register_container {
  background-color: #689dff;
  height: 100%;
}

.register_box {
  width: 450px;
  height: 350px;
  border-radius: 3px;
  background-color: #FFF;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.btn{
  display: flex;
  justify-content: center;
}
.register_box_input{
  width: 300px;
  height: 200px;
  border-radius: 3px;
  background-color: #FFF;
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
}
.register_text{
  font-size: 30px; /* 字体大小 */
  font-weight: bold; /* 字体粗细 */
  color: #333; /* 字体颜色 */
  margin-bottom: 20px; /* 下边距 */
  text-align: center; /* 文本居中 */
}
.login-link {
  margin-top: 5px;
  text-align: center;
}
</style>